<template>
  <view class="app-page">
    <scroll-view class="nav" scroll-y>
      <view class="nav-content">
        <view
          class="item-wrap"
          v-for="(item, i) in data"
          :key="i"
          @click="changeNav(item)"
        >
          <view :class="'item ' + (currItem.id == item.id ? 'active' : '')">
            <view class="title-wrap"
              >{{ item.title }}
              <view class="count">({{ item.count }})</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <scroll-view scroll-y>
      <view class="content">
        <view class="banner" v-if="currItem.picUrl">
          <image class="image" :src="currItem.picUrl" mode="aspectFill"></image>
        </view>
        <view class="item-wrap">
          <view
            v-for="(item, i) in currItem.children"
            :key="i"
            :class="'item ' + ((i + 1) % 2 == 0 ? 'last' : '')"
            @click="toPage(item)"
          >
            <view class="title">{{ item.title }}</view>
            <view>
              <view class="desc">{{ item.desc }}</view>
              <tui-button
                height="25px"
                width="65px"
                shape="rightAngle"
                :size="14"
                >查看</tui-button
              >
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: "-1",
          title: "全部",
          count: 2,
          sortOrder: 1, // 排序
          picUrl: "/static/image/app-banner.png", // 分类大封面
          type: 0, // 大图关联类别 0商品 1促销 2分类
          relateId: 0, // 大图关联ID
          children: [
            {
              title: "新闻、文章列表",
              desc: "文章列表页",
              url: "/pages/news/news",
            },
            {
              title: "新闻、文章详情页",
              desc: "详情页",
              url: "/pages/article/article",
            },
            {
              title: "个人中心钱包首页",
              desc: "钱包页",
              url: "/pages/wallet/wallet",
            },
            {
              title: "通讯录好友列表",
              desc: "通讯录",
              url: "/pages/app/contact/contact",
            },
          ],
        },
        {
          id: "0",
          title: "新闻",
          count: 2,
          sortOrder: 1, // 排序
          type: 0, // 大图关联类别 0商品 1促销 2分类
          relateId: 0, // 大图关联ID
          children: [
            {
              title: "新闻、文章列表",
              desc: "文章列表页",
              url: "/pages/news/news",
            },
            {
              title: "新闻、文章、通知",
              desc: "详情页",
              url: "/pages/article/article",
            },
          ],
        },
        {
          id: "1",
          title: "点单",
          count: 0,
          sortOrder: 1, // 排序
          type: 0, // 大图关联类别 0商品 1促销 2分类
          relateId: 0, // 大图关联ID
        },
        {
          id: "2",
          title: "视频",
          count: 0,
          sortOrder: 1, // 排序
          type: 0, // 大图关联类别 0商品 1促销 2分类
          relateId: 0, // 大图关联ID
        },
        {
          id: "3",
          title: "直播",
          count: 0,
          sortOrder: 1, // 排序
          type: 0, // 大图关联类别 0商品 1促销 2分类
          relateId: 0, // 大图关联ID
        },
        {
          id: "4",
          title: "社交",
          count: 1,
          sortOrder: 1, // 排序
          type: 0, // 大图关联类别 0商品 1促销 2分类
          relateId: 0, // 大图关联ID
          children: [
            {
              title: "通讯录好友列表",
              desc: "通讯录",
              url: "/pages/app/contact/contact",
            },
          ],
        },
        {
          id: "5",
          title: "教育",
          count: 0,
          sortOrder: 1, // 排序
          type: 0, // 大图关联类别 0商品 1促销 2分类
          relateId: 0, // 大图关联ID
        },
        {
          id: "6",
          title: "金融",
          count: 1,
          sortOrder: 1, // 排序
          type: 0, // 大图关联类别 0商品 1促销 2分类
          relateId: 0, // 大图关联ID
          children: [
            {
              title: "个人中心钱包首页",
              desc: "钱包页",
              url: "/pages/wallet/wallet",
            },
          ],
        },
        {
          id: "7",
          title: "图表",
          count: 0,
          sortOrder: 1, // 排序
          type: 0, // 大图关联类别 0商品 1促销 2分类
          relateId: 0, // 大图关联ID
        },
      ],
      currItem: {},
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      this.currItem = this.data[0];
    },
    changeNav(v) {
      this.currItem = v;
    },
    toPage(v) {
      uni.navigateTo({
        url: v.url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./app.scss";
</style>
